<template>
  <div class="header">
    <div class="header-left">
      <span class="iconfont">&#xe611;</span>
    </div>

    <div class="header-search">
      <span class="iconfont">&#xe618;</span>
      输入城市/景点/游玩主题
    </div>
    <div class="header-right" @click="toCity">
      {{city}}<span class="iconfont">&#xe6aa;</span>
    </div>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  export default {
    computed:{
      ...mapState(['city'])
    },
    methods:{
      toCity(){
        this.$router.push("/city")
      }
    },
  }
</script>

<style scoped lang="stylus">

@import "~css/var.styl"

.header{
  width: 100%;
  line-height: .88rem;
  background: $bgColor;
  color: #ffffff;
  font-size: .36rem;
  display: flex;
}
.header-left{
  width: .4rem;
  padding: 0 .2rem;
  text-align: center;
  font-weight: bold;
}
.header-search{
  flex:1;
  background: #ffffff;
  height: .6rem;
  margin: .14rem 0;
  border-radius: .1rem;
  color: #e4e7ea;
  line-height: .6rem;
  font-size: .28rem;
  padding-left: .2em;
  }
.header-right{
  font-size: .28rem;
  padding:0 .2em;
}

</style>
